<template>
  <div class="car-list">
    <scroll
      class="car-content"
      ref="scroll"
      :probe-type="3"
      @scroll="contentScroll"
    >
      <car-list-item
        v-for="item in carData"
        :key="item.id"
        :carD="item"
        @handleCheckedItem="handleCheckedItem"
      >
      </car-list-item>
    </scroll>
    <div class="calcItem">
      <div class="all-check">
        <span>
          <check-box :isClick="allCheck" @click.native="allClick"></check-box
        ></span>
        <span>全选</span>
      </div>
      <div class="title">
        <span>合计：</span>
        <span>$ :{{ totalprice }} </span>
      </div>
      <div class="commit" @click="commitClick">
        提交订单({{ checkedLength }})
      </div>
    </div>
    <back-top @click.native="backTopClick"></back-top>
  </div>
</template>

<script>
import CheckBox from "components/common/checkBox/CheckBox";
import CarListItem from "./CarListItem.vue";
import Scroll from "components/common/scroll/Scroll";

import { backTopMixin } from "common/mixin";
import BackTop from "components/content/backTop/BackTop";

export default {
  components: { CarListItem, CheckBox, Scroll, BackTop },
  props: {
    carData: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      allCheck: false,
    };
  },
  mixins: [backTopMixin],
  mounted() {
    // 所有商品选定后，全选按钮选定
    this.handleCheckedItem();
  },
  computed: {
    totalprice() {
      return this.carData
        .filter((item) => {
          return item.check;
        })
        .reduce((prev, item) => prev + item.price * item.count, 0)
        .toFixed(2);
    },

    checkedLength() {
      return this.carData.filter((item) => item.check).length;
    },
  },
  methods: {
    // 全选
    allClick() {
      console.log("我的");
      this.allCheck = !this.allCheck;
      this.carData.forEach((item) => (item.check = this.allCheck));
    },

    // 反选
    handleCheckedItem() {
      let result = this.carData.filter((item) => item.check);
      this.allCheck =
        result.length > 0 && result.length === this.carData.length;
    },
    commitClick() {
      let context = "";
      if (this.checkedLength === 0) {
        context = "亲，请选择商品";
      } else {
        context = "亲，您选购的商品已经下单";
      }
      this.$mytoast.toastShow(context);
    },
    contentScroll(position) {
      this.isShowBackTop = -position.y > 600;
    },
  },
};
</script>

<style scoped>
/* .car-list {
} */
.car-content {
  position: absolute;
  top: 44px;
  bottom: 100px;
  width: 100%;
  overflow: hidden;
}
.calcItem {
  position: fixed;
  bottom: 50px;
  left: 0;
  right: 0;
  z-index: 9;
  text-align: center;

  height: 50px;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: 1px solid #cccc;
  border-bottom: 1px solid #cccccc;
}
.calcItem > div {
  flex: 1;
}
.all-check {
  display: flex;
}

.commit {
  width: 100%;
  height: 100%;
  line-height: 50px;
  background-color: red;
}
</style>